<template>
<div>
  <el-card>
    <el-descriptions v-if="form"
        class="margin-top"
        title="个人资料"
        :column="3"
        :size="size"
        border
    >
      <template #extra>
<!--        <el-button type="primary">Operation</el-button>-->
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            用户名
          </div>
        </template>
        {{form.nickname}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            电话
          </div>
        </template>
        {{form.phone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            店铺名称
          </div>
        </template>
        {{form.shop_name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
           权限
          </div>
        </template>
        <el-tag size="small" type="warning">
          {{form.rootName}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            地址
          </div>
        </template>
        {{form.address}}
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-card class="mag_t-20">
    <div class="coll_title">账号信息</div>
    <div>
      <el-form :model="form" v-if="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="头像 :">
          <img class="bor_255" style="width: 120px;height: 120px" :src="form.user_pic" alt="">
        </el-form-item>
        <el-form-item label="账号 :">
          <el-input disabled v-model="form.username" />
        </el-form-item>
        <el-form-item label="名称 :">
          <el-input v-model="form.nickname" />
        </el-form-item>
<!--        <el-form-item label="当前密码 :">-->
<!--          <el-input v-model="form.password" type="password" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="新的密码 :">-->
<!--          <el-input v-model="form.password" type="password" />-->
<!--        </el-form-item>-->
      </el-form>
      <div>
        <el-button color="#4a5dff" :dark="isDark">确定</el-button>
      </div>
    </div>
  </el-card>
</div>
</template>
<script setup lang="ts">
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'
import {onMounted, reactive} from "vue";
import { storeVuex } from "@/store/modules/user";
import {storeToRefs} from "pinia";
const Vuex = storeToRefs(storeVuex())
import {user} from "@/api";
let {userInfo} = storeToRefs(storeVuex())
let form = reactive({})
onMounted(()=>{
  getUserInfo()
})
//获取用户资料
const getUserInfo = async ()=>{
  const res = await user.getUser_info({user_id:Vuex.userInfo.value.user_id})
  Object.assign(form, res.data.data.data[0]); // 更新表单数据
}
// getUser_info
</script>
<style scoped>

</style>
